{% load staticfiles %}
<!-- 导航栏 -->
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="{% url 'index' %}">
            {#            <img src="https://cdn.jsdelivr.net/gh/vmlite/s/bulma/images/bulma-logo.png" width="112" height="28">#}
            {#            <img src="{% static 'images/Logo/Logo.png' %}" width="160" height="56">#}
            <strong class="title is-3 has-text-white">&nbsp;&nbsp;为&nbsp;&nbsp;己&nbsp;&nbsp;</strong>
        </a>

        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
           data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>

        </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
        {# 左侧链接 #}
        <div class="navbar-start">

            <a class="navbar-item has-text-centered-mobile {% if request.path == '/' or request.path|slice:'6' == '/index' %} is-active {% endif %}"
               href="{% url 'index' %}">
                <strong>首&nbsp;&nbsp;页</strong>
            </a>
            <a class="navbar-item has-text-centered-mobile {% if request.path|slice:'8' == '/courses' %} is-active {% endif %}"
               href="{% url 'courses:list' %}">
                <strong>课&nbsp;&nbsp;程</strong>
            </a>
            <a class="navbar-item has-text-centered-mobile {% if request.path|slice:'4' == '/org' and request.path|slice:'12' != '/org/teacher' %} is-active {% endif %}"
               href="{% url 'org:list' %}">
                <strong>机&nbsp;&nbsp;构</strong>
            </a>
            <a class="navbar-item has-text-centered-mobile {% if request.path|slice:'12' == '/org/teacher' %} is-active {% endif %}"
               href="{% url 'org:teacher_list' %}">
                <strong>讲&nbsp;&nbsp;师</strong>
            </a>


        </div>
        {# 搜索框 #}
        <form class="field has-addons" style="padding-top: 1%" method="post" action="{% url 'op:search' %}">
            <div class="control is-expanded">
                <input class="input is-primary is-rounded" type="text"
                       placeholder="请输入课程标签"
                       name="search_input" maxlength="50">
            </div>
            <div class="control">
                <button class="button is-primary is-rounded">
                    <i class="fa fa-search" aria-hidden="true"></i>&nbsp;&nbsp;搜&nbsp;&nbsp;索
                </button>
            </div>
            {% csrf_token %}
        </form>
        {# 右侧按钮 #}
        <div class="navbar-end">
            {# 用户已登录显示界面 #}
            {% if request.user.is_authenticated %}
                <div class="dropdown navbar-item has-text-centered">
                    {# 展开的按钮 #}
                    <div class="dropdown-trigger is-primary">
                        <button class="button is-rounded is-primary has-text-centered-mobile " aria-haspopup="true"
                                aria-controls="dropdown-menu">
                            <span>
                                <strong class="">{{ user.username }}</strong>
                            </span>
                            <span class="icon">
                                <strong><i class="fa fa-angle-down" aria-hidden="true"></i></strong>
                            </span>
                        </button>
                    </div>
                    {# 展开的列表 #}
                    <div class="dropdown-menu has-text-centered" id="dropdown-menu" role="menu">
                        <div class="dropdown-content">
                            <a href="{% url 'users:myfav_course' %}?nav_tab=myfav_course" class="dropdown-item" >
                                <strong>我&nbsp;的&nbsp;收&nbsp;藏&nbsp;<i class="fa fa-star"
                                                                       aria-hidden="true"></i></strong>
                            </a>
                            <a href="{% url 'users:messages' %}?nav_tab=messages" class="dropdown-item">
                                <strong>我&nbsp;的&nbsp;消&nbsp;息&nbsp;<i class="fa fa-bell"
                                                                       aria-hidden="true"></i></strong>
                            </a>
                            <a href="{% url 'users:info' %}?nav_tab=info" class="dropdown-item">
                                <strong>个&nbsp;人&nbsp;资&nbsp;料&nbsp;<i class="fa fa-address-card"
                                                                       aria-hidden="true"></i></strong>
                            </a>
                            <hr class="dropdown-divider">
                            <a href="{% url 'logout' %}" class="dropdown-item">
                                <strong>退&nbsp;出&nbsp;登&nbsp;录&nbsp;<i class="fa fa-sign-out"
                                                                       aria-hidden="true"></i></strong>
                            </a>
                        </div>
                    </div>
                </div>

                {# 用户未登录显示界面 #}
            {% else %}
                <a class="navbar-item has-text-centered-mobile" href="{% url 'login' %}">
                    <strong>登&nbsp;&nbsp;录&nbsp;&nbsp;<i class="fa fa-sign-in" aria-hidden="true"></i></strong>
                </a>
                <a class="navbar-item is-primary has-text-centered-mobile" href="{% url 'register' %}">
                    <strong>注&nbsp;&nbsp;册&nbsp;&nbsp;<i class="fa fa-user-plus" aria-hidden="true"></i></strong>
                </a>
            {% endif %}
        </div>
    </div>
</nav>
